<template>
	<div id="app" >
		<!-- Header 导航栏 -->
		<header id="header" class="alt">
		 <div class="logo" style="cursor: pointer;" @click="toHome">InkCloud<span style="font-family: '微软雅黑';">墨云自习</span> </div>
		 
		</header>
		<!-- Banner 中央标题 -->
			<div id="banner">
				<div>
					<el-input  id="search" placeholder="输入要搜索的文章" v-model="enter"></el-input>
					<el-button type="success" id="searchbutton">搜索</el-button>
					</div>
			</div>
			<el-divider></el-divider>
		
		
		
		<el-row>
			<el-col :span="5">
				<i class="el-icon-caret-right"></i>
			</el-col>
		  <el-col :span="3">
			  <i class="el-icon-alarm-clock"></i>
			  <font size="4" color="seagreen">发布时间</font>
			  </el-col>
		  	  
			  <el-col :span="5">
			  <i class="el-icon-s-custom"></i>
			  <font  size="4" color="aquamarine">作者</font>
			  </el-col>
		     
			 <el-col :span="5">
			 <i class="el-icon-tickets"></i>
			  <font  size="4" color="darkgoldenrod">标题</font>
			  </el-col>

			<el-col :span="2" >
				 <el-button type="primary" round  @click="drawer = true">发布文章</el-button>
			</el-col>

		</el-row>		
		<el-divider></el-divider>
<!-- 下面为文章列表 -->
		
		<div v-loading="listloading">
		<articlelist v-for="articleinfo in articleinfos" v-bind:article="articleinfo"></articlelist>
		</div>	
		
		
		
		<!-- 文章发布 -->
	    <el-drawer
		  title="文章发布"
		  :visible.sync="drawer"
		  :direction="direction"
		  
		  :before-close="handleClose">
		 				
				
                                         <!-- 发布容器 -->
				<el-container>
				  <el-header height="100px">                <!-- header -->
					<el-row>
						<el-col span="1">
							<i class="el-icon-position" ></i>
						</el-col>
						<el-col :span="5" >
							文章标题
							</el-col>
						<el-col :span="15">
						<el-input placeholder="请输入标题" clearable="true"
						 v-model="submitArticle.title" maxlength="30" show-word-limit>
						</el-input>
					
						</el-col>
					</el-row>    
				  </el-header>
				  
				  <el-main >                       <!-- main -->
					  <i class="el-icon-edit"></i>
					  <font style="font-size: large;">文章内容</font>
					  <el-input
					    type="textarea"
					    :rows="10"
					    placeholder="请输入内容"
					    v-model="submitArticle.text">
					  </el-input>
				  </el-main>  
				  
				  <el-footer >                       <!-- footer -->
				
				  <el-row>
				    <el-col :span="5">
						<el-button type="primary" round @click='publishArticle' :loading="submitWaiting">
							{{ submitWaiting ? '' : '发布' }}
							</el-button>
					</el-col>
				    <el-col :span="12">
						<el-button type="danger" icon="el-icon-delete" circle @click="deleteClose"></el-button>
					</el-col>
				  </el-row>
					  
				  </el-footer>
				</el-container>
				
				
	  
		</el-drawer>
	</div>
	
</template>

<script>
	import articlelist from '../components/articlelist.vue'
	import axios from 'axios'
	
	
	export default {
	  name: 'Community',
	 components:{articlelist},
	 data:function(){
		  return{
				drawer:false,
				enter:'',
				listloading:true,
				articleinfos: '',
				submitArticle:{title:'',text:''},
				submitWaiting:false
				
		 }
	 },
	 
	 methods:{
		 
		getArticleList:function(){
			this.listloading=true
			var server = this.$myConfig.server
			var that = this
			axios({url: server+'/community/articleList',withCredentials: true})
			        .then(function (response) {
			           
						var status = response.data.status
						if(status==0){
							that.$message.warning("数据发生点小差错")
							
						}else{
							that.$message.success("数据获取成功")
							that.articleinfos = response.data.data
							that.listloading=false
						}
		  
			        })
			        .catch(function (error) {
			            alert('出错')
			        });
			
		},
		
		 handleClose(done) {
		        this.$confirm('暂时关闭？')
		          .then(_ => {
					
		            done();
					
		          })
		          .catch(_ => {});
		   },
		 deleteClose:function(){
			 this.$confirm('删除内容并关闭弹窗?')
			   .then(_ => {
			 	
			    this.drawer=false
			 	this.submitArticle.text=''
				this.submitArticle.title=''
			   })
			   .catch(_ => {});
		 },
		 
		 publishArticle:function(){
			 var server = this.$myConfig.server
			 var loginAddr = this.$myConfig.loginAddr
			 var isEmpty=this.publishCheck()
			 if(isEmpty==0){return}
			 this.submitWaiting=true
			 var that = this
			 axios({url: server+'/community/publishArticle',withCredentials: true,data:that.submitArticle,method:'post'})
			         .then(function (response) {
						 var status = response.data.status
			            if(status==-1){
							that.$message.error('您还没登录哦');
							// 登陆跳转
							that.submitWaiting=false
							
							that.timer = setTimeout(()=>{   //设置延迟执行
							     window.location.href = loginAddr;           
							            },2000);
			
						}else if(status==0){
							that.$message.error('服务器内部出现问题或者提交数据有问题')
							that.submitWaiting=false
						} else{
							that.$message.success('发布成功')
							that.submitWaiting=false
							that.submitArticle.text=''
							that.submitArticle.title=''
							that.drawer= false
							that.getArticleList
						}
			         })
			         .catch(function (error) {
			             that.$message.warning('网络开了个小差');
						 that.submitWaiting=false					
			         });			 
		 },
		 
		 publishCheck:function(){
			 if(this.submitArticle.title=='' || this.submitArticle.text==''){
				 this.$message.warning('标题和内容都不可为空')
				 return 0
			 }
				
		 },
		 
		 toHome:function(){
			 var mainAddr = this.$myConfig.mainAddr
			 this.timer = setTimeout(()=>{   //设置延迟执行
			      window.location.href = mainAddr;           
			             },0);
			
		 }
		  	      
	 },
	 mounted() {
	 	this.getArticleList()
	 }
	 
	}
	

	
	
</script>





<style>
	html,body,#app {
	  margin: 0;
	  padding: 0;
	  font-family: "Raleway", Arial, Helvetica, sans-serif;
	}
/* Header 导航栏*/
#header {
	font-size: 1.25em;
	background: rgba(0, 0, 0, 0.75);
	color: #aed6f1;
	height: 3.25em;
	left: 0;
	line-height: 3.25em;
	position: fixed;
	text-align: right;
	top: 0;
	width: 100%;
	cursor:default;
	z-index: 10001;
}

#header > .logo {
	display: inline-block;
	height: inherit;
	left: 1em;
	line-height: inherit;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
}

#header > .logo span {
	font-weight: 300;
	font-size: .8em;
	color: #FFF;
}

#header > a {
	transition: color 0.2s ease-in-out;
	display: inline-block;
	padding: 0 1.25em;
	text-decoration: none;
	color: #FFF;
}

#header > a:hover {
	color: #3498db;
}

/* 背景透明,位置调整 */
#header.alt {
	animation: none;
	background-color: transparent;
	box-shadow: none;
	overflow: hidden;
	position: absolute;
	top: 1em;
}

/* Banner 背景*/
#banner {
	padding: 5em 0 5em 0;
	background-size: cover;
	background-position: top;
	background-attachment: fixed;
	background-repeat: no-repeat;
	
	background-image: url(../assets/img/banner.jpg);
	
}

#search{
	position: absolute;
	left: 35%;
	display: inline-block;
	width: 20%;

	
}

#searchbutton{
	top: 95px;
	position: absolute;
	left: 56%;
	display: inline-block;
}
	
	


</style>
